<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>拖曳插件</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
</head>

<body>
<h2><pre>
       拖曳插件draggable的功能是拖动被绑定的元素，当这个jQuery UI插件与元素绑定后，可以通过调用draggable()方法，实现各种拖曳元素的效果，
      调用格式如下：$(selector). draggable({options})
       options参数为方法调用时的配置对象，根据该对象可以设置各种拖曳效果，如“containment”属性指定拖曳区域，“axis”属性设置拖曳时的坐标方向。
</pre></h2>
<div id="divtest">
    <div id="x" class="drag">沿x轴拖拽</div>
    <div id="y" class="drag">沿y轴拖拽</div>
    <div class="drag1">任意拖拽</div>
</div>

<script type="text/javascript">
    $(function () {
        $("#x"). draggable({axis:"x"});
        $("#y"). draggable({axis:"y"})
        $(".drag1"). draggable({containment:"parent"})
    });
</script>
</body>
</html>